<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>扫雷123456</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                position: relative;
                width: 370px;
                margin: 15px auto;
            }

            .item {
                box-sizing: border-box;
                width: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 3px;
                background: #aaaaaa;
                text-align: center;
                font-size: 18px;
                color: #ffffff;
                position: absolute;
                cursor: pointer;
            }

            .item.mine {
                background: #ff0000;
                background-image: url(images/mine.png);
                background-size: 80% 80%;
                background-position: center center;
                background-repeat: no-repeat;
            }

            .item.num {
                background: #11c2c2;
            }

            .item.empty {
                background: #dddddd;
            }

            .item.confirm {
                background: #999999;
                background-image: url(images/label.png);
                background-size: 80% 80%;
                background-position: center center;
                background-repeat: no-repeat;
            }
        </style>
    </head>

    <body>
        <div class="box"></div>
        <script type="text/javascript">
            ;(function() {
                document.oncontextmenu = function() {
                    return false
                }

                var size = 9
                var mineNum = 10
                var grid = []
                var open = []
                var list = null
                var isOver = false
                const IAMMINE = 10

                initGrid()
                setMineNum()
                showGrid()

                function initGrid() {
                    for (var i = 0; i < mineNum; i++) {
                        grid.push(IAMMINE)
                        open.push(0)
                    }

                    for (var i = mineNum; i < size * size; i++) {
                        grid.push(0)
                        open.push(0)
                    }

                    for (var i = 0; i < size * size; i++) {
                        var r = parseInt(Math.random() * (size * size))

                        var t = grid[r]
                        grid[r] = grid[i]
                        grid[i] = t
                    }
                }

                function setMineNum() {
                    for (var i = 0; i < size * size; i++) {
                        if (!grid[i]) {
                            grid[i] = getMineNum(i)
                        }
                    }
                }

                function getMineNum(index) {
                    var normalArr = [-size - 1, -size, -size + 1, -1, 1, size - 1, size, size + 1]
                    var leftArr = [-size, -size + 1, 1, size, size + 1]
                    var rightArr = [-size - 1, -size, -1, size - 1, size]
                    var arr = []
                    if (index % size === 0) {
                        arr = leftArr
                    } else if (index % size === size - 1) {
                        arr = rightArr
                    } else {
                        arr = normalArr
                    }
                    var count = 0
                    for (var i = 0; i < arr.length; i++) {
                        var temp = index + arr[i]
                        if (temp >= 0 && temp < size * size) {
                            if (grid[temp] === IAMMINE) {
                                count++
                            }
                        }
                    }
                    return count
                }

                function showGrid() {
                    var sHtml = ''
                    for (var i = 0; i < size * size; i++) {
                        var topNum = parseInt(i / size)
                        var leftNum = i % size
                        var str = 'top:' + (topNum * 40 + 10) + 'px;left:' + (leftNum * 40 + 10) + 'px;'
                        sHtml +=
                            '<div data-grid="' +
                            grid[i] +
                            '" data-num="' +
                            i +
                            '" class="item" style="' +
                            str +
                            '"></div>'
                    }
                    document.querySelectorAll('.box')[0].innerHTML = sHtml

                    list = document.querySelectorAll('.item')
                    for (var i = 0; i < list.length; i++) {
                        list[i].addEventListener('mousedown', function(ev) {
                            if (isOver) {
                                return
                            }

                            var num = parseInt(this.dataset.num)

                            if (open[num]) {
                                return
                            }

                            var gridNum = parseInt(this.dataset.grid)
                            if (ev.button === 0) {
                                list[num].classList.remove('confirm')
                                if (gridNum === 0) {
                                    isEmpty(num)
                                } else if (gridNum === IAMMINE) {
                                    showAllMines()
                                } else {
                                    isNum(num)
                                }
                            } else if (ev.button === 2) {
                                list[num].classList.toggle('confirm')
                                checkAllConfirm()
                            }
                        })
                    }
                }

                function showEmpty(index) {
                    var normalArr = [-size - 1, -size, -size + 1, -1, 1, size - 1, size, size + 1]
                    var leftArr = [-size, -size + 1, 1, size, size + 1]
                    var rightArr = [-size - 1, -size, -1, size - 1, size]
                    var arr = []

                    if (index % size === 0) {
                        arr = leftArr
                    } else if (index % size === size - 1) {
                        arr = rightArr
                    } else {
                        arr = normalArr
                    }

                    for (var i = 0; i < arr.length; i++) {
                        var temp = index + arr[i]

                        if (temp >= 0 && temp < size * size) {
                            if (open[temp] == 0) {
                                if (grid[temp] == 0) {
                                    isEmpty(temp)
                                } else if (grid[temp] > 0 && grid[temp] < 10) {
                                    isNum(temp)
                                }
                            }
                        }
                    }
                }

                function isEmpty(num) {
                    open[num] = 1
                    list[num].classList.add('empty')
                    showEmpty(num)
                    checkWin()
                }

                function isNum(num) {
                    open[num] = 1
                    list[num].innerHTML = grid[num]
                    list[num].classList.add('num')
                    checkWin()
                }

                function checkWin() {
                    var b = true
                    for (var i = 0; i < size * size; i++) {
                        if (grid[i] !== 10 && open[i] === 0) {
                            b = false
                            break
                        }
                    }
                    if (b) {
                        showWin()
                    }
                }

                function checkAllConfirm() {
                    var list = document.querySelectorAll('.item.confirm')
                    if (list.length < 10) {
                        return
                    }
                    var b = true
                    for (var i = 0; i < list.length; i++) {
                        if (grid[list[i].dataset.num] !== 10) {
                            b = false
                        }
                    }
                    b && showWin()
                }

                function showAllNumAndEmpty() {
                    for (var i = 0; i < list.length; i++) {
                        open[i] = 1
                        if (grid[i] === 0) {
                            list[i].className = 'item empty'
                        } else if (grid[i] !== IAMMINE) {
                            list[i].innerHTML = grid[i]
                            list[i].className = 'item num'
                        }
                    }
                }

                function showAllMines() {
                    for (var i = 0; i < list.length; i++) {
                        if (grid[i] === 10) {
                            list[i].className = 'item mine'
                        }
                    }
                    isOver = true
                }

                function showWin() {
                    isOver = true
                    showAllNumAndEmpty()
                    setTimeout(() => alert('win'), 300)
                }
            })()
        </script>
    </body>
</html>
